<template>
    <div class="container">
      <vxe-table
        border
        resizable
        max-height="400"
        align="center"
        auto-resize
        :scroll-y="{enabled: false}"
        :data="goodListData">
        <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
        <vxe-table-column field="goodsName" title="商品名称"></vxe-table-column>
        <vxe-table-column field="goodCode" title="商品编码"></vxe-table-column>
        <vxe-table-column field="goodsBarCode" title="商品条码"></vxe-table-column>
        <vxe-table-column field="goodsUnitName" title="单位" width="60"></vxe-table-column>
        <vxe-table-column field="totalPlanQuantity" title="计划数量"></vxe-table-column>
        <vxe-table-column field="planQuantity" title="拣货数量"></vxe-table-column>
        <vxe-table-column field="recheckQuantity" title="复核数量"></vxe-table-column>
        <!-- <vxe-table-column field="locationName" title="分配库位"></vxe-table-column> -->
        <vxe-table-column field="goodsStatusName" title="库存状态"></vxe-table-column>
        <vxe-table-column field="gmtManufacture" title="生产日期"></vxe-table-column>
        <vxe-table-column field="remarks" title="备注"></vxe-table-column>
        <vxe-table-column title="操作" fixed="right" width="80" v-if=" operation != 'detail' ">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="缺货" placement="top">
              <vxe-button type="text" @click="outOfStock(scope.row.inventoryCode,scope.row.oldInventoryCode)">
                <i class="el-icon-document" />
              </vxe-button>
            </el-tooltip>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-modal v-model="operationModel" title="缺货" width="1200" height="630" destroy-on-close>
        <vxe-table
          border
          resizable
          ref="xTable"
          height="500"
          align="center"
          :scroll-y="{enabled: false}"
          :data="tableData2"
          :edit-rules="validRules"
          :edit-config="{trigger: 'click', mode: 'cell'}"
        >
          <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
          <vxe-table-column field="deliveryCode" title="订单号"></vxe-table-column>
          <vxe-table-column field="isvCode" title="原始单号"></vxe-table-column>
          <vxe-table-column field="logisticsName" title="销售平台"></vxe-table-column>
          <!-- <vxe-table-column field="customerName" title="收货客户"></vxe-table-column> -->
          <vxe-table-column field="goodsName" title="商品名称"></vxe-table-column>
          <vxe-table-column field="notRecheckQuantity" title="复核数量"></vxe-table-column>
          <vxe-table-column field="recheckRefundQuantity" title="缺货数量">
            <template v-slot="{ row }">
              <vxe-input type="integer" v-model="row.recheckRefundQuantity" min="1"></vxe-input>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-button class="btn-ok" type="primary" @click.native="save">保  存</el-button>
      </vxe-modal>
    </div>
</template>

<script>
import Qs from 'qs'
import {
  recheckStockOut,
  queryPickingRigisters,
  queryListByInventoryCode
} from '@/api/outStorage'
export default {
  name: 'GoodList',
  components:{},
  props:{
    goodListData: {
      type: Array,
      default: () => {
        return []
      }
    },
    operation: {
      type: String,
      default: 'edit'
    },
  },
  data () {
    return {
      code: this.$route.query.code,
      tableData: [],
      tableData2: [],
      loading: false,
      oldInventoryCode: '',
      inventoryCode: '',
      operationModel: false,
      validRules: {
        recheckRefundQuantity: [
          { pattern: '^[0-9]*[1-9][0-9]*$', message: '格式不正确' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created(){
    // this.getGoodList()
  },
  mounted(){},
  methods: {
    modelShowHide() {
      this.operationModel = !this.operationModel
    },
    // 商品列表
    getGoodList() {
      this.loading = true
      queryPickingRigisters(this.code).then(response => {
        console.log(response);
        this.loading = false
        this.tableData = response.data
      })
    },
    // 缺货-列表
    outOfStock(inventoryCode, oldInventoryCode) {
      this.loading = true
		  const parms = {
        inventoryCode,
        oldInventoryCode,
        wavePickingCode: this.$route.query.wavePickingCode
      }
      this.inventoryCode = inventoryCode
      queryListByInventoryCode('outbound', Qs.stringify(parms)).then(response => {
        this.loading = false
        this.tableData2 = response.data
        this.modelShowHide()
      })
    },
    // 缺货
    save() {
      const parm = {
        entitys: this.tableData2,
        inventoryCode: this.inventoryCode,
        wavePickingCode: this.$route.query.wavePickingCode
      }
      recheckStockOut(parm).then(response => {
        this.modelShowHide()
        this.$emit('refresh')
        this.$emit('orderListRef','1')
      })
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
      const fields = ['key']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.btn-ok{
  float: right;
  margin-top: 20px;
}
</style>
